<template>
	<view class="content">
		<LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
			@start="startCallBack" @end="endCallBack" />
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格
	export default {
		data() {
			return {
				title: 'Hello',
				blocks: [{
					padding: '13px',
					background: '#617df2'
				}],
				prizes: [{
						fonts: [{
							text: '0',
							top: '10%'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '1',
							top: '10%'
						}],
						background: '#b8c5f2'
					},
					{
						fonts: [{
							text: '2',
							top: '10%'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '3',
							top: '10%'
						}],
						background: '#b8c5f2'
					},
					{
						fonts: [{
							text: '4',
							top: '10%'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '5',
							top: '10%'
						}],
						background: '#b8c5f2'
					},
				],
				buttons: [{
						radius: '50px',
						background: '#617df2'
					},
					{
						radius: '45px',
						background: '#afc8ff'
					},
					{
						radius: '40px',
						background: '#869cfa',
						pointer: true,
						fonts: [{
							text: '开始\n抽奖',
							top: '-20px'
						}]
					},
				],
			}
		},
		onLoad() {},
		methods: {
			// 点击抽奖按钮触发回调
			startCallBack() {
				// 先开始旋转
				this.$refs.myLucky.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
					// 假设后端返回的中奖索引是0
					const index = Math.round(Math.random() * this.prizes.length)
					// 调用stop停止旋转并传递中奖索引
					this.$refs.myLucky.stop(index)
				}, 3000)
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				// 奖品详情
				console.log(prize)
				console.log(prize.fonts[0].text)
				if (prize.fonts[0].text) {
					uni.showToast({
						title: "抽到" + prize.fonts[0].text,
						duration: 2000,
						icon: 'none',
					});
				}

			}

		}, // 注册组件
		components: {
			LuckyWheel,
			LuckyGrid
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
